<template>
  <el-row class="minder-editor-container">
    <el-row class="tools">
      <el-button round plain type="primary" size="medium" @click="resizeToCurr" class="left">重新定位</el-button>
      <el-button round plain type="primary" size="medium" @click="resizeToMax" class="left">放大</el-button>
      <el-button round plain type="primary" size="medium" @click="resizeToMin" class="left">缩小</el-button>
      <el-select @change="templateChange" v-model="importJson.template" class="left">
        <el-option v-for="(value, key) in templateList" :key="key" :value="key" :label="value"></el-option>
      </el-select>
      <el-select @change="themeChange" v-model="importJson.theme" class="left">
        <el-option v-for="(value, key) in themeList" :key="key" :value="key" :label="value"></el-option>
      </el-select>
      <el-button round plain type="warning" size="medium" @click="closeDialog" style="float:right;">关闭</el-button>
      <el-button v-per="'mind_save'" round plain type="primary" size="medium" @click="savebtn" style="float:right;">保存</el-button>
      <el-button round plain type="primary" size="medium" @click="exportHandle()" style="float:right">导出图片</el-button>
    </el-row>
    <div :id="ids" class="my-editor-container"></div>
  </el-row>
</template>


<script>

import {generateMixed} from "../../utils";
import "hotbox-ui/hotbox.css"
import "../../../package/kityMinder/kityminder.editor.css"

import "kity"
import "hotbox-ui"
import "kityminder-core"
import "../../../package/kityMinder/kityminder.editor.js"


export default {
  name: "MyEditer",
  props: {
    ids: {
      type: String,
      default: generateMixed(12)
    },
    importJson: {
      type: Object,
    }
  },

  components: {},
  data() {
    return {
      minder: null,
      navIndex: 0,
      templateList: {
        "default": "思维导图",
        "tianpan": "天盘图",
        "structure": "组织结构图",
        "filetree": "目录组织图",
        "right": "逻辑结构图",
        "fish-bone": "鱼骨头图"
      },
      themeList: {
        "classic": "脑图经典",
        "classic-compact": "紧凑经典",
        "snow": "温柔冷光",
        "snow-compact": "紧凑冷光",
        "fish": "鱼骨图",
        "fresh-red": "清新红",
        "fresh-soil": "泥土黄",
        "fresh-green": "文艺绿",
        "fresh-blue": "天空蓝",
        "fresh-purple": "浪漫紫",
        "fresh-pink": "脑残粉",
        "fresh-red-compat": "紧凑红",
        "fresh-soil-compat": "紧凑黄",
        "fresh-green-compat": "紧凑绿",
        "fresh-blue-compat": "紧凑蓝",
        "fresh-purple-compat": "紧凑紫",
        "fresh-pink-compat": "紧凑粉",
        "tianpan": "经典天盘",
        "tianpan-compact": "紧凑天盘"
      },
      rootData: {
        root: {
          children: [],
          data: {
            text: "默认根节点",
            id: this.ids
          }
        },
        template: "right",
        theme: "fresh-blue"
      }


    };
  },

  methods: {
    resizeToCurr() {
      this.minder.execCommand("camera", this.minder.getRoot(), 600)
    },
    resizeToMax() {
      this.minder.execCommand("zoomIn")
    },
    resizeToMin() {
      this.minder.execCommand("zoomOut")
    },
    themeChange() {
      this.minder.execCommand("theme", this.importJson.theme)
    },

    templateChange() {
      this.minder.execCommand("template", this.importJson.template)
    },
    savebtn() {
      this.$emit("saveData", this.minder.exportJson());
    },

    closeDialog() {
      this.$emit("closeDialog");
    },
    exportHandle() {
      let that = this;
      this.minder.exportData("png").then(content => {
        let element = document.createElement("a");
        element.setAttribute("href", content);
        let filename = '导出用例图片';
        element.setAttribute("download", filename);
        element.style.display = "none";
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
      });
    },
    renddata() {
      let that = this;
      that.$nextTick(() => {
        setTimeout(function () {
          that.minder = new window.kityminder.Editor(document.getElementById(that.ids)).minder
          console.log("子组件接收值为："+JSON.stringify(that.importJson))
          that.minder.importJson(that.importJson);
          // that.minder.on("contentchange", val => {});
          that.minder.on("selectionchange", function (e) {
            var node = e.minder.getSelectedNode();
            that.currentNode = node;
            if (node && node.parent) {
              setTimeout(function () {
                node.parent.layout();
              }, 0);
            }
          });
        });
      })
    }
  },
  mounted() {
    this.renddata();
    let that = this;
    document.onkeydown = function (e) {
      // Ctrl+S 键盘保存事件
      if (e.keyCode == 83 && e.ctrlKey || e.keyCode == 83 && e.metaKey) {
        if(that.$_has("mind_save")){  //用户存在脑图保存权限
          that.$emit("saveData", that.minder.exportJson());
        }
        e.preventDefault();
      }

      if (e.keyCode == 86 && e.ctrlKey || e.keyCode == 86 && e.metaKey) {
        e.preventDefault();  //暂时屏蔽ctrl+V粘贴事件，脑图节点复制粘贴后其随机id未改变
      }
    }
  },
}
</script>


<style lang="less" scoped>
.basebtn {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 4px;
}

.baseSelect {
  height: 32px;

  option {
    min-height: 1.5em;
  }
}


.minder-editor-container {
  top: 0px
}

.my-editor-container {
  height: 100%;
}

.tools {
  height: 90px;
}

.left {
  float: left;
}

.tools {
  height: 40px;
}

.el-button {
  height: 40px;
}

</style>

